import { defineComponent, reactive, ref } from "vue";
import LPopup from "@/components/public/lPopup/lPopup";
import styles from "./edit.module.less";
import { message } from "ant-design-vue";
import useNavigator from "@/hooks/useNavigator";
export default defineComponent({
  props: {
    service: {
      type: Object,
      required: true,
    },
  },
  emits: ['change'],
  setup(props, { emit, expose }) {
    const navigator = useNavigator();
    const state = reactive({
      name: '',
      insurance_id: null,
      rate: null,
    })
    const popupRef = ref(null as any);
    //打开弹窗
    const open = (e: any) => {
      state.name = e.name;
      state.insurance_id = e.insurance_id;
      popupRef.value.open();
      console.log(navigator.route?.query?.id || '',)
    }
    //关闭弹窗
    const close = () => {
      popupRef.value.close();
    };

    // 提交
    const submit = () => {
      console.log(state.rate)
      if (!state.rate) {
        message.error("请输入折扣率!");
        return;
      }
      if (state.rate === 0.3 || state.rate === 0) {
        message.error('折扣不符合要求，请重新输入')
        return
      }
      props.service.edit({
        user_id: navigator.route?.query?.id,
        insurance_id: state.insurance_id,
        rate: state.rate,
      }).then((res: any) => {
        message.success("编辑产品成功");
        close();
        emit('change');
      })
    }
    // 取消
    const cancel = () => {
      close();
    }
    // 关闭回调
    const closed = () => {
      state.rate = null;
    }
    expose({
      open,
      close,
    });
    return () => (
      <LPopup title="折扣编辑" width="600px" ref={popupRef} onClosed={() => { closed() }}>
        <div class={styles.container}>
          <div class={styles.rows}>
            <div class={styles.row}>
              <div class={styles.label}>产品名称：</div>
              <div class={styles.value}>{state.name}</div>
            </div>
            <div class={styles.row}>
              <div class={styles.label}>折扣率：</div>
              <a-input-number class={styles.value} v-model:value={state.rate} placeholder="请输入折扣率" max={0.3} min={0} />
            </div>
          </div>
          <div class={styles.footer}>
            <a-button type="primary" onClick={() => { submit() }}>确定</a-button>
            <a-button onClick={() => { cancel() }}>取消</a-button>
          </div>
        </div>
      </LPopup>
    )
  }
})